

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/2.jpg">
  <link rel="icon" type="image/png" href="/img/2.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="K">
  <meta name="keywords" content="">
  <title>前端布局-flex布局 - K</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/github-gist.min.css" />
    
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>かい</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/img/1.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container page-header text-center fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-11-04 23:23" pubdate>
        2020年11月4日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      1.8k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      21
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto" id="post">
            <!-- SEO header -->
            <h1 style="display: none">前端布局-flex布局</h1>
            
            <div class="markdown-body" id="post-body">
              <h2 id="flex布局"><a href="#flex布局" class="headerlink" title="flex布局"></a>flex布局</h2><ul>
<li>特点<ul>
<li>flex是flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性，任何容器都可以指定为flex布局</li>
<li>flex弹性布局，操作方便，布局简单，移动亿应用广泛</li>
<li>pc端支持较差，</li>
</ul>
</li>
<li>与传统布局区别<ul>
<li>传统布局在pc端兼容性好，但是布局繁琐，有局限性，不能在移动端方便的布局</li>
</ul>
</li>
<li>两者总结（随便写写）<ul>
<li>如果是pc端，用传统布局</li>
<li>如果是移动或者不考虑兼容性的pc端布局，就是用flex弹性布局</li>
</ul>
</li>
</ul>
<h2 id="布局原理"><a href="#布局原理" class="headerlink" title="布局原理"></a>布局原理</h2><ul>
<li>当我们为父元素设置flex布局后，子元素的 float clear 和 vertical-align属性都会失效<ul>
<li> 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局</li>
</ul>
</li>
<li>采用flex布局的元素称为 “flex容器” 它的所有子元素自动成为容器的成员，<br>被称为 “flex项目” <ul>
<li>div盒子设置 display:flex属性后 这个div就是flex容器，而div下的所有子元素都是flex项目，这些子容器可以纵向排列，也可以横向排列</li>
</ul>
</li>
<li>总结<ul>
<li>通过给父盒子添加 flex属性，来控制盒子的位置和排列方式</li>
</ul>
</li>
</ul>
<h2 id="flex-direction-父元素属性"><a href="#flex-direction-父元素属性" class="headerlink" title="flex-direction (父元素属性)"></a>flex-direction (父元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>设置主轴的方向</li>
</ul>
</li>
<li><p>介绍（瞎bb）</p>
<ul>
<li>在flex布局中是分为主轴和测轴两个方向的，同样的叫法有 行和列 x轴和y轴<ul>
<li>默认主轴的方向就是在x轴的方向，水平向右</li>
<li>而侧轴的方向就是在y轴的方向，水平向下</li>
</ul>
</li>
<li>但是主轴和侧轴的方向是可以变换的</li>
</ul>
</li>
<li><p>属性</p>
<ul>
<li>row  默认值 从左到右 （元素的排列方式）</li>
<li>row-reverse 从右到左</li>
<li>分隔线下主轴是 y轴</li>
</ul>
<hr>
<ul>
<li>分隔线上主轴是 x 轴</li>
<li>column 从上到下</li>
<li>column-reverse 从下到上</li>
</ul>
</li>
<li><p>总结</p>
<ul>
<li>flex-direction属性决定了主轴的方向（即子元素排列的方向）</li>
<li>主轴和侧轴是会变化的，就看谁是主轴，谁是侧轴，而我们的子元素就是跟着主轴来排列的</li>
<li>属性为 row 即 x轴为主轴  属性为 column 即 y轴为主轴</li>
</ul>
</li>
<li><p>用法  (css样式)</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">div</span>&#123;
    <span class="hljs-comment">/* 给父级 添加flex属性*/</span>
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">background-color</span>: pink;
    <span class="hljs-comment">/* 从左到右 默认*/</span>
    <span class="hljs-comment">/* flex-direction: row; */</span>
    <span class="hljs-comment">/* 从右到左 */</span>
    <span class="hljs-comment">/* flex-direction: row-reverse; */</span>
        
    <span class="hljs-comment">/* 把flex主轴设置为y轴 */</span>
    <span class="hljs-comment">/* 从上到下 */</span>
    <span class="hljs-comment">/* flex-direction: column; */</span>
    <span class="hljs-comment">/* 从下到上 */</span>
    <span class="hljs-comment">/* flex-direction: column-reverse; */</span>

&#125;
<span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">span</span>&#123;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background-color</span>: purple;
&#125;</code></pre>
<ul>
<li>html标签<pre><code class="hljs apache"><span class="hljs-section">&lt;div&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
<span class="hljs-section">&lt;/div&gt;</span></code></pre>

</li>
</ul>
</li>
</ul>
<h2 id="justify-content-父元素属性"><a href="#justify-content-父元素属性" class="headerlink" title="justify-content (父元素属性)"></a>justify-content (父元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>该属性定义了子元素在主轴的对其方式</li>
</ul>
</li>
<li><p>属性值</p>
<ul>
<li>flex-start  默认值 从头部开始，如果主轴是x轴，则从左到右</li>
<li>flex-end  从尾部开始排列</li>
<li>center 在主轴居中对其</li>
<li>space-around  平分剩余空间</li>
<li>space-between 先贴两边，在平分剩余空间（重要）<ul>
<li>比如有3个div 边上的2个div贴两边，中间的div占剩余的空间</li>
</ul>
</li>
</ul>
</li>
<li><p>用法</p>
<pre><code class="hljs maxima">    div&#123;
        <span class="hljs-comment">/* 给父级 添加flex属性*/</span>
        <span class="hljs-built_in">display</span>: flex;
        <span class="hljs-built_in">width</span>: 800px;
        <span class="hljs-built_in">height</span>: 300px;
        <span class="hljs-built_in">background</span>-<span class="hljs-built_in">color</span>: pink;
        <span class="hljs-comment">/* 默认的主轴是 x轴 row; */</span>
        <span class="hljs-comment">/* justify-content: 是设置主轴子元素的排列方式; */</span>
        <span class="hljs-comment">/* justify-content: flex-start; 默认的 */</span>
        <span class="hljs-comment">/* 贴右边对其 */</span>
        <span class="hljs-comment">/* justify-content: flex-end;  */</span>
        <span class="hljs-comment">/* 居中对其 */</span>
        <span class="hljs-comment">/* justify-content: center; */</span>
        <span class="hljs-comment">/* 平分剩余空间 */</span>
        <span class="hljs-comment">/* justify-content: space-around; */</span>
        <span class="hljs-comment">/* 左右盒子贴两边 中间盒子平分 */</span>
        justify-<span class="hljs-built_in">content</span>: <span class="hljs-built_in">space</span>-between;

    &#125;
    div span&#123;
        <span class="hljs-built_in">width</span>: 150px;
        <span class="hljs-built_in">height</span>: 100px;
        <span class="hljs-built_in">background</span>-<span class="hljs-built_in">color</span>: purple;
    &#125;
&lt;/<span class="hljs-built_in">style</span>&gt;</code></pre>
<ul>
<li>html标签<pre><code class="hljs apache">  <span class="hljs-section">&lt;div&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
    <span class="hljs-section">&lt;span&gt;</span><span class="hljs-section">&lt;/span&gt;</span>
<span class="hljs-section">&lt;/div&gt;</span></code></pre>

</li>
</ul>
</li>
</ul>
<h2 id="flex-warp-父元素属性"><a href="#flex-warp-父元素属性" class="headerlink" title="flex-warp (父元素属性)"></a>flex-warp (父元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>可以让flex元素是否换行</li>
<li>默认情况下子元素是排列在主轴直线上的（不会换行）</li>
</ul>
</li>
<li><p>属性值</p>
<ul>
<li>nowarp  默认值 不换行</li>
<li>wrap  换行</li>
</ul>
</li>
<li><p>用法</p>
<ul>
<li>在父元素设置 flex-wrap: wrap 子元素就会换行了，前提是父元素要有 display:flex样式<pre><code class="hljs css">    <span class="hljs-selector-tag">div</span>&#123;
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
    <span class="hljs-attribute">background-color</span>: pink;
    <span class="hljs-attribute">flex-wrap</span>: wrap; <span class="hljs-comment">/*让子元素换行*/</span>
&#125;</code></pre>

</li>
</ul>
</li>
</ul>
<h2 id="align-items-父元素属性"><a href="#align-items-父元素属性" class="headerlink" title="align-items (父元素属性)"></a>align-items (父元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>设置侧轴的元素排列方式</li>
<li>改属性是控制子元素在侧轴的排列方式（子项为单项的时候使用（不换行））</li>
</ul>
</li>
<li><p>属性值</p>
<ul>
<li>flex-start  默认值 从上到下</li>
<li>flex-end  从下到上</li>
<li>center  垂直居中 （用的多）</li>
<li>stretch  拉伸</li>
</ul>
</li>
<li><p>用法</p>
<pre><code class="hljs css">   <span class="hljs-selector-tag">div</span>&#123;
    <span class="hljs-comment">/* 给父级 添加flex属性*/</span>
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">background-color</span>: pink;
    <span class="hljs-attribute">justify-content</span>: center; <span class="hljs-comment">/* 子元素水平居中主轴对其居中(主轴)*/</span>
    <span class="hljs-attribute">align-items</span>: center; <span class="hljs-comment">/*子元素垂直居中 侧轴对其居中(侧轴)*/</span>
    <span class="hljs-comment">/* 注意： div是 父元素 给父元素设置后是让子元素排列 */</span>
&#125;</code></pre>

</li>
</ul>
<h2 id="align-content-父元素属性"><a href="#align-content-父元素属性" class="headerlink" title="align-content (父元素属性)"></a>align-content (父元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>设置侧轴上子元素的排列方式（多行）</li>
<li>适用于子项出现多行的情况下，在单行是没有效果的（子元素换行就可以用这个）</li>
</ul>
</li>
<li><p>属性值</p>
<ul>
<li>flex-start  默认值 在侧轴的头部开始排列</li>
<li>flex-end  在侧轴的尾部开始排列</li>
<li>center  在侧轴中间显示</li>
<li>space-around  子元素平分侧轴的剩余空间</li>
<li>space-between  子元素在侧轴线分布在两边 在平分中间的剩余空间</li>
<li>stretch  设置子元素的高度平分父元素高度（就是子元素的高度跟父元素一样高）</li>
</ul>
</li>
</ul>
<h2 id="flex-flow-父元素属性"><a href="#flex-flow-父元素属性" class="headerlink" title="flex-flow (父元素属性)"></a>flex-flow (父元素属性)</h2><ul>
<li>作用<ul>
<li>是flex-direction和flex-wrap的复合属性</li>
<li>有两个属性的特点</li>
</ul>
</li>
<li>用法<pre><code class="hljs css"><span class="hljs-selector-tag">div</span>&#123;
    <span class="hljs-comment">/* 给父级 添加flex属性*/</span>
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">background-color</span>: pink;
    <span class="hljs-comment">/* flex-direction: column;</span>
<span class="hljs-comment">    flex-wrap: wrap; */</span>
    <span class="hljs-comment">/* 把设置主轴方向和是否换行简写 */</span>
    <span class="hljs-attribute">flex-flow</span>: column wrap;
    <span class="hljs-comment">/*这个属性是设置主轴的方向 和 换行*/</span>
&#125;</code></pre>

</li>
</ul>
<h2 id="flex-子元素属性"><a href="#flex-子元素属性" class="headerlink" title="flex (子元素属性)"></a>flex (子元素属性)</h2><ul>
<li>作用<ul>
<li>定义子项分配的剩余空间时，用flex来标识该子元素站多少的份数</li>
</ul>
</li>
<li>属性<table>
<thead>
<tr>
<th>数字</th>
<th>表示子元素在父元素剩余空间中占多少份</th>
</tr>
</thead>
<tbody><tr>
<td>%</td>
<td>表示子元素在父元素剩余空间的占百分之多少</td>
</tr>
</tbody></table>
</li>
</ul>
<h2 id="align-self-子元素属性"><a href="#align-self-子元素属性" class="headerlink" title="align-self (子元素属性)"></a>align-self (子元素属性)</h2><ul>
<li><p>作用</p>
<ul>
<li>控制子元素自己在侧轴的排列方式</li>
<li>允许单个子元素和其他子元素不同的对其方式，可覆盖align-items属性</li>
</ul>
</li>
<li><p>属性</p>
<ul>
<li>auto 默认值 表示继承父元素的align-items属性，如果没有父元素则效果和stretch相同</li>
<li>其他属性均和 align-items相同</li>
</ul>
</li>
</ul>
<h2 id="order-子元素属性"><a href="#order-子元素属性" class="headerlink" title="order (子元素属性)"></a>order (子元素属性)</h2><ul>
<li>作用<ul>
<li>定义子元素的排列顺序</li>
<li>数值越小排列越靠前 默认为0 可以为负值</li>
<li>和z-inde不一样，z-inde是元素叠在一起时显示的顺序，而order是元素分散开，显示的位置的顺序</li>
</ul>
</li>
<li>用法<pre><code class="hljs css">   <span class="hljs-selector-tag">div</span> &#123;
      <span class="hljs-attribute">display</span>: flex;
      <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;
      <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
      <span class="hljs-attribute">background-color</span>: pink;
      <span class="hljs-comment">/* 让三个子盒子沿着侧轴底侧对其 */</span>
      <span class="hljs-comment">/* align-items: flex-end; */</span>
      <span class="hljs-comment">/* 让三号盒子下来底侧 */</span>

  &#125;
  <span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">span</span>&#123;
      <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;
      <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
      <span class="hljs-attribute">background-color</span>: purple;
      <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">5px</span>;
  &#125;
  <span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">span</span><span class="hljs-selector-pseudo">:nth-child(3)</span>&#123;
      <span class="hljs-attribute">align-self</span>: flex-end;
  &#125;
  <span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">span</span><span class="hljs-selector-pseudo">:nth-child(2)</span>&#123;
      <span class="hljs-attribute">order</span>: -<span class="hljs-number">1</span>;
      <span class="hljs-comment">/* 让2号盒子在最前面 */</span>
  &#125;
<span class="hljs-comment">/*span的排列顺序现在是 2 1 3了*/</span></code></pre>
<ul>
<li>html标签<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>

</li>
</ul>
</li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/html-css/">html-css</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章是以学习为目的，如果有不对的地方可以一起交流沟通共同学习 邮箱:1248287831@qq.com！</p>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/11/05/%E5%89%8D%E7%AB%AF%E8%AF%B7%E6%B1%82-ajax%E8%AF%B7%E6%B1%82/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript-ajax请求</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/09/02/python%E6%96%87%E4%BB%B6/">
                        <span class="hidden-mobile">python-文件</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://space.bilibili.com/39165374" target="_blank" rel="nofollow noopener"><span>LMK</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '#post-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "前端布局-flex布局&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>















</body>
</html>
